<template>
	<view class="container">
		<!-- #ifdef APP-PLUS -->
		<!--App端专用组件，解决部分android机 调用uni.canvasToTempFilePath出错的问题-->
		<!--App端使用5+ api裁剪，部分功能受限：1.请不要使用触摸旋转 2.旋转角度必须是90的正整数倍-->
		<tui-cropper-app :lockRatio="true" :imageUrl="imageUrl" @cropper="cropper"></tui-cropper-app>
		<!-- #endif -->

		<!-- #ifndef APP-PLUS -->
		<tui-picture-cropper :lockRatio="true" :imageUrl="imageUrl" @cropper="cropper"></tui-picture-cropper>
		<!-- #endif -->

		<tui-modal :show="modal" title="请选择图片" content="组件默认使用,图片可由上个页面传入" @click="chooseImage"></tui-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				modal: true,
				imageUrl: '' //要裁剪的图片
			};
		},
		methods: {
			cropper(e) {
				//裁剪完成后处理逻辑
				uni.previewImage({
					current: '', // 当前显示图片的http链接
					urls: [e.url] // 需要预览的图片http链接列表
				});
			},
			chooseImage(e) {
				let index = Number(e.index);
				if (index == 0) {
					uni.navigateBack();
				} else {
					uni.chooseImage({
						count: 1,
						sizeType: ['original', 'compressed'],
						sourceType: ['album', 'camera'],
						success: res => {
							const tempFilePaths = res.tempFilePaths[0];
							this.imageUrl = tempFilePaths;
							this.modal = false;
						}
					});
				}
			}
		}
	};
</script>

<style></style>
